import HeaderDropdown from '@/components/HeaderDropdown'
import MpSwitch from '@/components/MpSwitch'
import { getTenantList, switchTenant } from '@/services/TenantService'
import { useEmotionCss } from '@ant-design/use-emotion-css'
import { useModel } from '@umijs/max'
import { useRequest } from 'ahooks'
import React, { useEffect } from 'react'
import { closeWebSocket, createWebSocket } from '../WebSocket'
import Avatar from './AvatarDropdown'

export type SiderTheme = 'light' | 'dark'

const GlobalHeaderRight: React.FC = () => {
  let getTenantListRequest = useRequest(getTenantList)
  const className = useEmotionCss(() => {
    return {
      display: 'flex',
      height: '48px',
      marginLeft: 'auto',
      overflow: 'hidden',
      gap: 8,
    }
  })

  const actionClassName = useEmotionCss(({ token }) => {
    return {
      display: 'flex',
      float: 'right',
      height: '48px',
      marginLeft: 'auto',
      overflow: 'hidden',
      cursor: 'pointer',
      padding: '0 12px',
      lineHeight: '48px',
      borderRadius: token.borderRadius,
      '&:hover': {
        backgroundColor: token.colorBgTextHover,
      },
    }
  })

  const { initialState } = useModel('@@initialState')

  if (!initialState || !initialState.settings) {
    return null
  }

  return (
    <div className={className}>
      {/*<span*/}
      {/*  className={actionClassName}*/}
      {/*  onClick={() => {*/}
      {/*    window.open('https://pro.ant.design/docs/getting-started');*/}
      {/*  }}*/}
      {/*>*/}
      {/*  <QuestionCircleOutlined />*/}
      {/*</span>*/}
      <MpSwitch />
      <Avatar />
      {/*<SelectLang className={actionClassName}/>*/}
      <HeaderDropdown
        menu={{
          selectedKeys: [],
          items: getTenantListRequest.data?.map((tenant) => ({
            label: tenant.tenantName,
            key: tenant.id,
            onClick: () => {
              switchTenant(tenant.id).then(() => {
                window.location.reload()
              })
            },
          })),
        }}
      >
        <span className={actionClassName}>
          {/*<AvatarLogo/>*/}
          {initialState.userinfo?.tenantInfo.tenantName}
        </span>
      </HeaderDropdown>
    </div>
  )
}
export default GlobalHeaderRight
